<template>
    <view class="home-page" :style="backgroundImageStyle">
        <view class="invitation head">
            <image src="../../static/images/home/mipmap-xxxhdpi/7.png" class="logo"></image>
            <image src="../../static/images/home/mipmap-xxxhdpi/1.png" class="share" @click="quniShare"></image>
        </view>

        <image src="../../static/images/home/mipmap-xxxhdpi/100.png" class="invitation" @click="goToInvitation"></image>

        <view class="clickable-area" @click="toggleBackgroundImage"></view>

        <view class="speedUp">
            <radio-group @change="handleRadioGroupChange">
                <view><label class="radio">
                <radio value="udp" checked="true" />游戏加速</label><a src="#" class="agreement">udp协议</a>
                </view>
                <view><label class="radio">
                <radio value="tcp" />网页加速</label><a src="" class="agreement">tcp协议</a>
                </view>
            </radio-group>
        </view>

        <view class="member">
            <view class="warn">
                <image src="../../static/images/home/mipmap-xxxhdpi/6.png" class="remind"></image>
                <p class="expire">会员即将到期</p>
            </view>
            <view @click="goToPurchase" class="renew">
                <p>立即续费 ></p>
            </view>
        </view>

    </view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onMounted } from 'vue';
	import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
	
	const uniShare = ref(new UniShare()); // 分享
	const bgc = ref(false) ; // 切换背景图片
	
	onMounted(() => {
		
	});
	
	const toggleBackgroundImage = () => {
		bgc.value =!bgc.value;
		// console.log(bgc.value)
	};
	
	const backgroundImageStyle = computed(() => {
	    return {
	        'background-image': bgc.value? `url('${uni.getStorageSync('imagePathTwo')}')` : `url('${uni.getStorageSync('imagePathOne')}')`
	    };
	});
	

	// 分享
	const quniShare = () => {
	    // 调用系统原生分享的方法
	    uniShare.value.shareSystem({
	        content: {
	            type: 0,
	            href: 'https://uniapp.dcloud.io/',
	            title: '标题',
	            summary: '描述',
	            imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
	        },
	    }, e => {
	        console.log(uniShare.value.isShow);
	        console.log(e);
	    });
	};
	
	// 转向购买页面
	const goToPurchase = () =>{
		uni.switchTab({
			url:'/pages/purchase/purchase'
		})
	}
	// 转向邀请好友
	const goToInvitation = () =>{
		uni.navigateTo({
			url:'/pages/index/invitation/invitation',
			animationType: 'pop-in',
			animationDuration: 1000,
		})
	};
	
	
</script>

<style lang="scss" scoped>
		// 背景
	.home-page {
		background-color: #61A7FF;
		transition: background-image 0.3s ease, background-size 0.3s ease, background-position 0.3s ease;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		width: 100vw;
		height: 100vh;
		position: relative;
		z-index: 1;
		}
		// 更换背景
	.clickable-area{
		width: 240px;
		height: 240px;
		// background-color: #ffaaff;
		border-radius: 200px;
		position: absolute;
		top: 300px;
		left: 90px;
	}
		// 邀请
	.invitation{
		display: block;
		margin: 0 auto;
		width: 92%;
		height: 70px;
		// background-color: #ffaaff;
		}
		// logo
	.head{
		height: 120px;
	}
	.logo{
		display: block;
		margin-left: 0;
		width: 123px;
		height: 24px;
		float: left;
		margin-top: 15%;
	}
	.share{
		display: block;
		margin-left: 0;
		width: 20px;
		height: 20px;
		float: right;
		margin-top: 15%;
	}
		// 加速
	.speedUp{
		width: 92%;
		height: 45px;
		position: absolute;
		bottom: 130px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 30px;
		background-color: #ffffff;
		padding: 0 20px 0 20px;
	}
	radio-group {
	display: flex;
	width: 100%;
	justify-content: space-between;
	}
		// 协议
	.agreement{
		font-size: 12px;
		text-decoration: underline;
		margin-left: 5px;
	}
		// 会员
	.member{
		width: 92%;
		height: 30px;
		// background-color: #ff5500;
		position: absolute;
		bottom: 60px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		overflow: hidden;
		padding: 0 10px 0 10px;
	}
		// 到期
	.warn{
		display: flex;
		align-items: center;
		float: left;
	}
	.remind{
		display: block;
		width: 30px;
		height: 30px;
	}
	.expire{
		display: block;
		font-size: 15px;
		color: #ffffff;
		margin-left: 7px;
	}
		// 续费
	.renew{
		margin-left: auto;
		height: 25px;
		width: 80px;
		border-radius: 15px;
		border: 0.8px solid #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 13px;
		color: #ffffff;
	}
</style>
